<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>导航栏</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./menu.css">
    <link rel="stylesheet" href="./theme.css">
    <link rel="stylesheet" href="./index.css">
</head>


<body>
    <div class="container">
        <div class="section">
            <h2>蓝色主题</h2>
            <nav>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <span id="search-box" class="box">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>
                <ul id="nav" role="menu" class="menu pull-right">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>


            <nav>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <ul id="nav" role="menu" class="menu">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <span id="search-box" class="box pull-right">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>

            </nav>


            <nav>
                <ul id="nav" role="menu" class="menu">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <span id="search-box" class="box">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>

            </nav>
        </div>
        <div class="red section">
            <h2>红色主题</h2>
            <nav>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <span id="search-box" class="box">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>
                <ul id="nav" role="menu" class="menu pull-right">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>


            <nav>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <ul id="nav" role="menu" class="menu">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <span id="search-box" class="box pull-right">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>

            </nav>


            <nav>
                <ul id="nav" role="menu" class="menu">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <span id="search-box" class="box">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>

            </nav>
        </div>
        <div class="gold section">
            <h2>金色色主题</h2>
            <nav>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <span id="search-box" class="box">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>
                <ul id="nav" role="menu" class="menu pull-right">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>


            <nav>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <ul id="nav" role="menu" class="menu">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <span id="search-box" class="box pull-right">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>

            </nav>


            <nav>
                <ul id="nav" role="menu" class="menu">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <span id="search-box" class="box">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>

            </nav>
        </div>
        <div class="cyan section">
            <h2>青色主题</h2>
            <nav>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <span id="search-box" class="box">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>
                <ul id="nav" role="menu" class="menu pull-right">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>


            <nav>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <ul id="nav" role="menu" class="menu">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <span id="search-box" class="box pull-right">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>

            </nav>


            <nav>
                <ul id="nav" role="menu" class="menu">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <span id="search-box" class="box">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>

            </nav>
        </div>
        <div class="lime section">
            <h2>柠檬色主题</h2>
            <nav>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <span id="search-box" class="box">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>
                <ul id="nav" role="menu" class="menu pull-right">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>


            <nav>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <ul id="nav" role="menu" class="menu">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <span id="search-box" class="box pull-right">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>

            </nav>


            <nav>
                <ul id="nav" role="menu" class="menu">
                    <li class="menu-item active">
                        <a href="#">
                            <i class="fa fa-home"></i>
                            首页
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-heart-o"></i>
                            捐赠
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-line-chart"></i>
                            统计图标
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            <i class="fa fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">
                            更多<i class="more"></i>
                        </a>
                        <ul class="submenu">
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-question-circle-o"></i>
                                    提问
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-star-o"></i>
                                    收藏
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-cog"></i>
                                    设置
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-arrows-alt"></i>
                                    全屏显示
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <span id="logo-box" class="box">
                    <a id="logo" href="#">
                        <img src="./logo.svg" alt="logo">
                        <img src="./brand.svg" alt="brand">
                    </a>
                </span>
                <span id="search-box" class="box">
                    <i class="divider"></i>
                    <span id="input-box">
                        <span class="fa fa-search search-icon"></span>
                        <input type="text" placeholder="请输入要搜索的内容...">
                    </span>
                </span>

            </nav>
        </div>

    </div>
</body>

</html>